<template>
  <!-- 自定义滚动table -->
  <div class="scroll-table" :style="tableStyle">
    <template v-if="list.length">
      <a-row :gutter="8" class="title-box" v-if="showHeader">
        <a-col
          v-for="(item, index) of headerRow"
          :key="item.key"
          :span="config.span[index]"
          class="over-hidden"
        >
          <span class="title">{{ item.title }}</span>
        </a-col>
      </a-row>
      <section class="content-box datav-scroller-bar" @scroll="handleScroll">
        <div ref="contentListRef">
          <a-row
            :gutter="8"
            v-for="(item, index1) of list"
            :key="index1"
            :style="getRowStyle(index1)"
            class="content-row"
            @click="onRowClick(index1)"
          >
            <a-col
              v-for="(key, index2) of headerKeys"
              :key="key + index1 + '_' + index2"
              :span="config.span[index2]"
              :style="getColStyle(index2, item)"
              class="over-hidden"
            >
              <span v-if="key == 'index'">#{{ index1 + 1 }}</span>
              <span v-else class="content">{{ item[key] }}</span>
            </a-col>
          </a-row>
        </div>
      </section>
    </template>
    <div v-else class="no-building-tip">暂无数据</div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, toRefs, watch, ref } from "vue";
import store from "../../../../store";
import { context } from "ant-design-vue/lib/vc-image/src/PreviewGroup";

export default defineComponent({
  name: "ScrollTable",
  props: {
    header: {
      type: Array,
      default: () => [],
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
    config: {
      type: Object,
      default: () => ({
        span: [],
        rowStyle: {},
        style: [],
      }),
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, context) {
    const state = reactive({
      headerRow: [],
      headerKeys: [],
      tableStyle: {
        height: "100%",
      },
    });

    const isMobile = computed(() => store.getters.dataVMobile);
    const mobileFit = () => {
      if (isMobile.value) {
        state.tableStyle = {};
      } else {
        state.tableStyle = {
          height: "100%",
        };
      }
    };
    mobileFit();
    watch(isMobile, mobileFit);

    const getRowStyle = (index) => {
      let style = {};
      if (props.config.rowStyle) {
        style = { ...props.config.rowStyle };
      }
      if (index % 2) {
        // 奇数行
        style.background = "rgba(255, 255, 255, 0.1)";
      } else {
        style.background = "rgba(0, 0, 0, 0.1)";
      }
      if (props.config.rowClickable) {
        style.cursor = "pointer";
      }
      return style;
    };

    const getColStyle = (index, current) => {
      if (current.style && current.style[state.headerKeys[index]]) {
        return current.style[state.headerKeys[index]];
      }
      let style = props.config.style;
      if (style && style.length) {
        return style[index];
      }
      return "";
    };

    const init = () => {
      const { header, config } = props;
      if (!header.length) {
        return;
      }
      state.headerRow = header;
      state.headerKeys = header.map((item) => item.key);
      if (!config.span || !config.span.length) {
        const span = 24 / state.headerRow.length;
        config.span = [];
        for (let i = 0; i < state.headerRow.length; i++) {
          config.span.push(span);
        }
      }
    };

    watch(
      () => props.header,
      () => {
        init();
      }
    );

    init();

    const onRowClick = (index) => {
      if (props.config.rowClickable) {
        context.emit("onRowClick", index);
      }
    };

    const contentListRef = ref(null);

    const handleScroll = (e) => {
      if (
        e.target.scrollTop + e.target.offsetHeight + 1 >=
        contentListRef.value.offsetHeight
      ) {
        console.log("滑到底部了");
        context.emit("onScrollBottom");
      }
    };

    return {
      ...toRefs(state),
      getRowStyle,
      getColStyle,
      onRowClick,
      contentListRef,
      handleScroll,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
.scroll-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  // height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  .title-box {
    height: 3rem;
    padding: 0 1rem;
    overflow: hidden;

    .title {
      font-size: 1rem;
      overflow: hidden;
    }
  }
  .content-box {
    flex: 1;
    overflow: hidden auto;
    padding: 0 1rem;
    .content-row {
      height: 4rem;
      line-height: 4rem;
      overflow: hidden;
      .content {
        overflow: hidden;
      }
    }
  }
}
</style>
